<template>
  <div>
    <div class="form-body" >
      <div class="form-state-s" v-if="p_state > 0">{{ state_arr[p_state] }}</div>
      <div class="form-window" >
        <div class="form-window-line"></div>
        <div class="form-window-txt">保险信息</div>
      </div>
      <div class="form-form">
        <el-descriptions class="margin-top" :column="2" >
          <el-descriptions-item label="保险名称">{{ info.bx_name }}</el-descriptions-item>
          <el-descriptions-item label="保单号">{{info.bd_no}}</el-descriptions-item>
          <el-descriptions-item label="保障时间">{{ info.start_time }} - {{info.end_time}}</el-descriptions-item>
          <el-descriptions-item label="投保人联系人"> {{ info.insure_contact }} </el-descriptions-item>
          <el-descriptions-item label="投保人联系方式">{{ info.insure_mobile }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="form-window" >
        <div class="form-window-line"></div>
        <div class="form-window-txt">投保企业</div>
      </div>
      <div class="form-form">
        <el-form label-position="left" label-width="140px" size="small" :disabled="(form_id && p_state != 7) ? true : false">
          <el-form-item label="出险被保人" >{{info.insure}}</el-form-item>
          <el-form-item label="报案号" >
            <div style="width: 100%;position: relative">
              <el-input placeholder="请输入报案号" v-model="form.ba_no"  class="form-input" ></el-input>
              <el-button type="text" style="position: absolute;right: 10px;top: 0px" @click="view()">报案号获取流程</el-button>
            </div>
          </el-form-item>
          <el-form-item label="出险时间" >
            <el-date-picker
                v-model="form.cx_time"
                type="datetime"
                placeholder="出险时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="所属地区" >
            <div class="form-address">
              <el-select v-model="form.cx_province" @change="changeInsureProvince()" class="form-seletc" >
                <el-option v-for="(item,key) in insure_pro" :key="'insure'+key" :label="item.label" :value="item.label" ></el-option>
              </el-select>
              <el-select v-model="form.cx_city"  @change="changeInsureCity()" class="form-seletc">
                <el-option v-for="(item,key) in insure_city" :key="'insure'+key" :label="item.label" :value="item.label" ></el-option>
              </el-select>
              <el-select v-model="form.cx_area"  class="form-seletc">
                <el-option v-for="(item,key) in insure_area" :key="'insure'+key" :label="item.label" :value="item.label" ></el-option>
              </el-select>
              <el-input placeholder="请输入详细地址" v-model="form.cx_address" class="form-seletc-addr" ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="从事工作" >
            <el-input placeholder="请输入从事工作" v-model="form.cx_work"  class="form-input" ></el-input>
          </el-form-item>
          <el-form-item label="现场照片" >
            <div class="pei-form-upload" >
              <div class="pei-imgs-bxo" v-for="(item,key) in form.scene_img" :key="'img'+key" >
                <img :src="item" @click="seeModel(item)">
                <div class="pei-imgs-delete" @click="deleteImg(key)" v-if="!form_id || p_state == 7" >
                  <i class="el-icon-close" ></i>
                </div>
              </div>
              <div class="pei-form-up-add"  v-if="!form_id || p_state == 7">
                <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/pei-up-icon.png" class="pei-form-up-add-icon">
                <div class="up-box-txt">上传图片</div>
                <input type="file" class="upload-img-file" @change="upload($event,1)" ref="multifile"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="出险类型" >
            <el-select  v-model="form.cx_classify">
              <el-option v-for="(item,key) in info.classify" :key="'c'+key" :label="item" :value="key" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出险事故描述" >
            <el-input placeholder="请输入从事工作" v-model="form.memo"  class="form-input" type="textarea" :rows="4" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-window" >
        <div class="form-window-line"></div>
        <div class="form-window-txt">报案人</div>
      </div>
      <div class="form-form">
        <el-form label-position="left" label-width="140px" size="small"  :disabled="(form_id && p_state != 7) ? true : false">
          <el-form-item label="报案人姓名" >
            <el-input placeholder="请输入报案人姓名" v-model="form.ba_user"  class="form-input" ></el-input>
          </el-form-item>
          <el-form-item label="报案人电话" >
            <el-input placeholder="请输入报案人电话" v-model="form.ba_mobile"  class="form-input" ></el-input>
          </el-form-item>
          <el-form-item label="与出险人关系" >
            <el-input placeholder="请输入与出险人关系" v-model="form.ba_relevance"  class="form-input" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-window" >
        <div class="form-window-line"></div>
        <div class="form-window-txt">出险人</div>
        <div class="form-window-btn" >
          <el-button size="mini" class="com-btn" icon="el-icon-plus" @click="addUser()"  :disabled="(form_id && p_state != 7) ? true : false" >添加</el-button>
        </div>
      </div>
      <div class="form-form">
        <div class="pei-card" >
          <el-table size="mini" :data="form.user" :show-header="false" >
            <el-table-column width="80px">
              <template slot-scope="item">出险人{{item.$index + 1}}</template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="item">
                <el-input size="mini" v-model="item.row.name" placeholder="请输入出险人姓名"  :disabled="(form_id && p_state != 7) ? true : false" ></el-input>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="item">
                <el-input size="mini" v-model="item.row.id_card" placeholder="请输入出险人身份证"  :disabled="(form_id && p_state != 7) ? true : false" ></el-input>
              </template>
            </el-table-column>
            <el-table-column width="60px" v-if="!(form_id && p_state != 7)">
              <template slot-scope="item">
                <div @click="deleteUser(item.$index)"><i class="el-icon-delete delete-user" ></i></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div v-if="form_id && form.state >= 2 && form.state != 7">
        <div class="form-window" >
          <div class="form-window-line"></div>
          <div class="form-window-txt">理赔材料</div>
        </div>
        <div class="form-form">
          <el-form label-position="left" label-width="140px" size="small" >
            <el-form-item label="图片" >
              <div class="pei-form-upload" >
                <div class="pei-imgs-bxo" v-for="(item,key) in form.material_img" :key="'imgs'+key" >
                  <img :src="item" @click="seeModel(item)">
                  <div class="pei-imgs-delete" @click="deleteImgs(key)" v-if="form_id && (form.state == 2 || form.state == 8)" >
                    <i class="el-icon-close" ></i>
                  </div>
                </div>
                <div class="pei-form-up-add" v-if="form_id && (form.state == 2 || form.state == 8)">
                  <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/pei-up-icon.png" class="pei-form-up-add-icon">
                  <div class="up-box-txt">上传图片</div>
                  <input type="file" class="upload-img-file" @change="upload($event,2)" ref="multifile"/>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="文件" >
              <div>
                <div v-for="(item,key) in form.material_file" :key="'file'+key" >
<!--                  <span></span>
                  <el-button></el-button>
                  <div>
                    <span>{{item.url}}</span>
                  </div>-->
                  <a :href="item.url" :download="item.name">{{ item.name }}</a>
                  <span  v-if="form_id && (form.state == 2 || form.state == 8)" @click="deleteFile(key)" class="delete-file-icon"><i class="el-icon-delete" ></i></span>
                </div>
                <div class="pei-up-load-file" v-if="form_id && (form.state == 2 || form.state == 8)">
                  <el-button size="mini" icon="el-icon-upload2" >上传文件</el-button>
                  <input type="file" class="upload-img-file" @change="upload($event,3)" ref="multifile"/>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="form_id && form.state >= 4 && form.state != 7">
        <div class="form-window" >
          <div class="form-window-line"></div>
          <div class="form-window-txt">快递单号</div>
        </div>
        <div class="form-form">
          <el-form label-position="left" label-width="140px" size="small"  :disabled="(form_id && p_state > 4) ? true : false">
            <el-form-item label="快递公司" >
              <el-input placeholder="请输入快递公司" v-model="form.logistics"  class="form-input" ></el-input>
            </el-form-item>
            <el-form-item label="快递单号" >
              <el-input placeholder="请输入快递单号" v-model="form.logistics_no"  class="form-input" ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div style="text-align: center">
        <el-button size="small" class="com-btn" @click="submit()" v-if="!form_id || p_state == 7" >提交报案</el-button>
        <el-button size="small" class="com-btn" @click="submit()" v-if="form.id && (p_state == 2 || p_state == 8)" >上传理赔材料</el-button>
        <el-button size="small" class="com-btn" @click="submit()" v-if="form.id && p_state == 4" >确认发件</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="img_model" title="查看大图" width="500px" :append-to-body="true" >
      <img :src="img_src" style="display:block;width: 100%">
    </el-dialog>
    <el-dialog title="报案号获取" :visible.sync="viewDialog" width="450px" :append-to-body="true">
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        进入公众号搜索【<span style="font-weight: bold">太平洋产险华南运营中心</span>】
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng1.jpg" style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        点击【<span style="font-weight: bold;">太平洋产险华南运营中心</span>】并关注公众号
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng2.jpg" style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng3.jpg" style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        点击【<span style="font-weight: bold;">享服务</span>】选择【<span style="font-weight: bold;">95500客服</span>】
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng4.png" style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        输入【<span style="font-weight: bold;">转人工</span>】点击【<span style="font-weight: bold;">转人工</span>】服务
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng5.png" style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        输入【<span style="font-weight: bold;">非车险报案</span>】等待客服，按照要求提供报案材料即可，收到报案号才算报案成功。
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng6.png" style="width: 100%"></el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import province from "../../assets/js/province";
import city from "../../assets/js/city";
import area from "../../assets/js/area";

export default {
  data(){
    return {
      id : 0,
      info:{},
      form:{
        id:0,
        ba_no:'',
        cx_time : '',
        cx_province : '',
        cx_city : '',
        cx_area : '',
        cx_address : '',
        cx_work : '',
        cx_classify : 0,
        scene_img : [],
        memo : '',
        ba_user : '',
        ba_mobile : '',
        ba_relevance : '',
        user:[{name : '',id_card : ''}]
      },
      pro_index:0,
      city_index:0,
      area_index:0,
      insure_pro:[],
      insure_city:[],
      insure_area:[],
      form_id : 0,
      p_state : 0,
      state_arr:['','审核中','待上传','上传待审核','待邮寄','已发件','已完成','审核拒绝','上传拒绝'],
      img_model:false,
      img_src:'',
      viewDialog:false,
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    this.form_id = this.$route.query.id;
    if(this.form_id)this.getInfo();
    this.getData();
    this.insureAddr();
    this.form.id = this.id;

  },
  methods:{
    view(){
      this.viewDialog = true;
    },
    seeModel(src){
      this.img_model = true;
      this.img_src = src;
    },
    deleteFile(index){
      this.form.material_file.splice(index,1);
    },
    deleteImgs(index){
      this.form.material_img.splice(index,1);
    },
    getInfo(){
      this.ajaxs('report/getDetail',{
        data:{
          id: this.form_id
        },
        success:(res) => {
          this.form = res.msg.info;
          this.p_state = res.msg.info.state;
        }
      })
    },
    submit(){
      if(!this.form_id || this.p_state == 7)this.submitData();
      if(this.form_id && (this.p_state == 2 || this.p_state == 8))this.submitUpload();
      if(this.form_id && this.p_state == 4)this.submitKd();
    },
    //上传快递公司
    submitKd(){
      if(!this.form.logistics )return this.toast(0,'请输入快递公司');
      if(!this.form.logistics_no )return this.toast(0,'请输入快递单号');
      this.ajaxs('report/mailDo',{
        data:{
          id :this.form_id,
          logistics : this.form.logistics,
          logistics_no : this.form.logistics_no
        },
        success:(res) => {
          this.toast(res.code,res.msg);
          if(res.code) {
            this.$router.push({
              path:'/index/pei/index'
            })
          }
        }
      })
    },
    //上传理赔材料
    submitUpload(){
      if(this.form.material_img.length == 0 && this.form.material_file.length == 0)return this.toast(0,'请上传理赔材料');
      this.ajaxs('report/uploadMaterial',{
        data:{
          id :this.form_id,
          material_img : this.form.material_img,
          material_file : this.form.material_file
        },
        success:(res) => {
          this.toast(res.code,res.msg);
          if(res.code) {
            this.$router.push({
              path:'/index/pei/index'
            })
          }
        }
      })
    },
    //提交数据
    submitData(){
      if(!this.form.cx_time)return this.toast(0,'请选择出险时间');
      if(!this.form.cx_province || !this.form.cx_city || !this.form.cx_area || !this.form.cx_address)return this.toast(0,'请完善出险地点');
      if(!this.form.cx_work)return this.toast(0,'请输入从事工作');
      if(!this.form.scene_img.length)return this.toast(0,'请上传现场照片');
      if(!this.form.cx_classify)return this.toast(0,'请选择事故类型');
      if(!this.form.memo)return this.toast(0,'请输入事故描述');
      if(!this.form.ba_user)return this.toast(0,'请输入报案人姓名');
      if(!this.form.ba_mobile)return this.toast(0,'请输入报案人手机');
      if(!this.form.ba_relevance)return this.toast(0,'请输入与出险人关系');
      if(!this.form.user.length)return this.toast(0,'请添加出险人');
      for(var i in this.form.user) {
        if(!this.form.user[i].name)return this.toast(0,'请输入出险人姓名');
        if(!this.form.user[i].id_card)return this.toast(0,'请输入出险人身份证');
      }
      if(this.form_id)this.form.id = this.form_id;
      var url = this.form_id ? 'report/reportEdit': 'report/reportDo';
      this.ajaxs(url,{
        data: this.form,
        success:(res) => {
          this.toast(res.code,res.msg);
          if(res.code) {
            this.$router.push({
              path:'/index/pei/index'
            })
          }
        }
      })
    },
    deleteUser(index){
      this.form.user.splice(index,1);
    },
    addUser(){
      this.form.user.push({name : '' , id_card : ''});
    },
    deleteImg(index){
      this.form.scene_img.splice(index,1);
    },
    //选择文件
    upload(e,index) {
      console.log(e.currentTarget.files[0]);
      var file = e.currentTarget.files;
      this.fileUpload(file[0],index);
    },
    //上传文件
    fileUpload(img,index) {
      if (img == undefined) return false;
      //获取文件后缀名
      var arr = img["name"].split(".");
      var img_type = arr[1];
      let OSS = require("ali-oss");
      let client = new OSS({
        region: this.$region,
        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
        accessKeyId: this.$accessKeyId,
        accessKeySecret: this.$accessKeySecret,
        bucket: this.$bucket
      });
      // client.options.endpoint.protocol = "https:";
      //获取当前时间
      var date = new Date();
      var file_name =
          date.getFullYear() +
          "/" +
          (date.getMonth() + 1) +
          "/" +
          date.getDate() +
          "/" +
          date.getHours() +
          "_" +
          date.getMinutes() +
          "_" +
          date.getSeconds() +
          "_" +
          date.getMilliseconds();
      let filename = this.file_name + file_name + "." + img_type;
      let res_file = img;
      let that = this;

      async function put() {
        var fielinput = that.$refs['multifile'];
        fielinput.value = '';
        try {
          //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
          await client
              .multipartUpload(filename, res_file, {
                progress: percentage => {
                  that.progress = parseInt(percentage * 100);
                  console.log('上传进度：' + that.progress);
                  //console.log(percentage); // 上传文件进度
                }
              })
              .then(res => {
                // that.img = that.old ? res.name :that.$oss_url + res.name;
                if(index == 1) that.form.scene_img.push(that.$oss_url + res.name);
                if(index == 2)that.form.material_img.push(that.$oss_url + res.name);
                if(index == 3)that.form.material_file.push({name : img.name , url : that.$oss_url + res.name});
                //that.$emit("change", res.name);
              })
              .catch(err => {
                console.log(err);
                setTimeout(() => {
                  that.load = false;
                }, 500);
                return that.$Message.error("文件上传失败");
                //return that.toast(0, "上传失败");
              });
        } catch (e) {
          setTimeout(() => {
            that.load = false;
          }, 500);
          return that.$Message.error("文件上传失败");
        }

      }

      this.load = true;
      this.progress = 0;
      put();
    },
    getData(){
      this.ajaxs('report/report',{
        data:{
          id : this.id
        },
        success:(res) => {
          this.info = res.msg;

        }
      })
    },
    changeInsureProvince(){
      this.city_index = 0;
      this.area_index = 0;
      this.form.cx_city = '';
      this.form.cx_area = '';
      this.insureAddr();
    },
    changeInsureCity(){
      this.area_index = 0;
      this.form.cx_area = '';
      this.insureAddr();
    },
    insureAddr(){
      this.insure_pro = province;
      for(var i in this.insure_pro) {
        if(this.insure_pro[i].label == this.form.cx_province) {
          this.pro_index = i;
        }
      }
      this.insure_city = city[this.pro_index];
      for(var x in this.insure_city) {
        if(this.insure_city[x].label == this.form.cx_city) {
          this.city_index = x;
        }
      }
      this.insure_area = area[this.pro_index][this.city_index];
      for(var y in this.insure_area) {
        if(this.insure_area[y].label == this.form.cx_area) {
          this.area_index = y;
        }
      }
    },
  }
}
</script>

<style scoped>
@import "../../assets/css/index/form.css";
@import "../../assets/css/pei/form.css";
</style>
